<template>

  <div class="user-management">
    <!-- 筛选区域 -->
    <el-row class="filter-row mb-4">
      <el-col :span="6">
        <el-input v-model="search.id" placeholder="请输入用户ID" clearable />
      </el-col>
      <el-col :span="6">
        <el-input v-model="search.nickname" placeholder="请输入昵称" clearable />
      </el-col>
      <el-col :span="6">
        <el-input v-model="search.account" placeholder="请输入账号" clearable />
      </el-col>
      <el-col :span="6" class="text-right">
        <el-button type="primary" @click="fetchUsers">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="userList" :loading="loading" style="width: 100%">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="nickname" label="昵称" width="120" />
      <el-table-column prop="account" label="账号" width="120" />
      <el-table-column prop="role" label="角色" width="120" :formatter="formatRole" />
      <el-table-column prop="email" label="邮箱" width="200" />
      <el-table-column prop="login_ip" label="登录IP" width="150" />
      <el-table-column prop="last_login_time" label="最近登录时间" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)" danger>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页（可选） -->
    <el-pagination v-if="total > 0" :page-size="pageSize" :total="total" :current-page="currentPage"
      @current-change="handlePageChange" style="margin-top: 20px" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue';
import axios from 'axios';
const search = reactive({
  id: '',
  nickname: '',
  account: ''
});
const userList = ref([]);
const loading = ref(false);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(20);

// 重置搜索条件
function resetSearch() {
  search.id = '';
  search.nickname = '';
  search.account = '';
  currentPage.value = 1;
  fetchUsers();
}

function queryUser() {
  axios.get('http://127.0.0.1:8000/user/search', {
    params: {
      page: currentPage.value,
      pagesize: pageSize.value,
      id: search.id,
      nickname: search.nickname,
      account: search.account
    }
  })
    .then(res => {
      console.log(res.data.data)
      userList.value = res.data.data
      total.value = res.data.total
    })
    .catch(err => {
      console.error(err);
    })
};
function fetchUsers() {
  queryUser();
}
function handleDelete(user) {
  axios.delete("http://localhost:8000/user/delete/"+ user.id)
    .then(res => {
      console.log(res.data);
      fetchUsers();
    })
    .catch(err => {
      console.error(err);
    });
}
onMounted(() => {
  queryUser();
  // Your code here
});

// 在组件卸载前执行的操作
onUnmounted(() => {
  // Your code here
});
</script>

<style scoped>
.user-management {
  padding: 24px;
}

.filter-row .el-input {
  width: 90%;
}

.el-table th {
  background: #f5f7fa;
}

.text-right {
  text-align: right;
}
</style>